<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸运大抽奖</title>
  <!-- 字节跳动CDN -->
<!-- 替换为国内稳定源 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4e54c8;
            --secondary-color: #8f94fb;
            --accent-color: #ff6b6b;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            pointer-events: none;
        }

        .main-title {
            font-weight: 700;
            text-shadow: 0 0 10px rgba(78, 84, 200, 0.7);
            position: relative;
            display: inline-block;
        }

        .main-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            border-radius: 2px;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .main-title:hover::after {
            transform: scaleX(1);
        }

        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            overflow: hidden;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
        }

        .card-header {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
            font-weight: bold;
            border-bottom: none;
            padding: 15px 20px;
            position: relative;
            overflow: hidden;
        }

        .card-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to bottom right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.1) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                transform: rotate(30deg) translate(-30%, -30%);
            }

            100% {
                transform: rotate(30deg) translate(30%, 30%);
            }
        }

        .btn-primary {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 50px;
            padding: 8px 20px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(78, 84, 200, 0.4);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(78, 84, 200, 0.6);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .btn-primary:hover::after {
            opacity: 1;
        }

        .btn-danger {
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            border: none;
            border-radius: 50px;
            padding: 10px 25px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
            transition: all 0.3s ease;
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
        }

        .btn-success {
            background: linear-gradient(45deg, #28a745, #5cb85c);
            border: none;
            border-radius: 50px;
            padding: 10px 25px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        }

        .list-group-item {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            margin-bottom: 10px;
            border-radius: 10px !important;
            transition: all 0.3s ease;
        }

        .list-group-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }

        #resultArea {
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
            margin: 10px 0;
            border: 1px dashed rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        #resultArea:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .badge {
            font-weight: 500;
            padding: 5px 10px;
            border-radius: 50px;
        }

        .modal-content {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            overflow: hidden;
        }

        .modal-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .modal-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .winners-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            max-height: 70vh;
            overflow-y: auto;
            padding: 10px;
        }

        .winner-item {
            text-align: center;
            padding: 15px;
            background: rgba(78, 84, 200, 0.1);
            border-radius: 10px;
            border-left: 4px solid var(--accent-color);
            transition: all 0.3s ease;
            flex: 1 1 auto;
            min-width: 180px;
            max-width: 220px;
        }

        .winner-item:hover {
            transform: scale(1.03);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        @media (max-width: 768px) {
            .card {
                margin-bottom: 15px;
            }

            .winner-item {
                min-width: 140px;
                padding: 10px;
            }
        }

        .neon-text {
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
            animation: flicker 1.5s infinite alternate;
        }

        @keyframes flicker {

            0%,
            19%,
            21%,
            23%,
            25%,
            54%,
            56%,
            100% {
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
            }

            20%,
            24%,
            55% {
                text-shadow: none;
            }
        }

        .draw-btn {
            position: relative;
            overflow: hidden;
        }

        .draw-btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to bottom right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(30deg);
            animation: shine 2s infinite;
        }

        .result-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            width: 100%;
            margin-top: 20px;
        }

        .result-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            min-width: 200px;
            transition: all 0.3s ease;
        }

        .result-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .export-btn-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="particles" id="particles"></div>

    <div class="container py-5">
        <div class="text-center mb-5 animate__animated animate__fadeInDown">
            <h1 class="display-3 main-title neon-text floating">幸运大抽奖</h1>
            <p class="lead mt-3">🎉 年度盛典 · 惊喜连连 🎉</p>
            <div class="mt-4">
                <div class="spinner-grow text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow text-success" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow text-danger" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow text-warning" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="spinner-grow text-info" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card animate__animated animate__fadeInLeft">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-award me-2"></i> 奖项设置</h5>
                    </div>
                    <div class="card-body">
                        <ul id="awardList" class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>加载中...</span>
                                <button class="btn btn-primary btn-sm" disabled>
                                    <span class="spinner-border spinner-border-sm" role="status"
                                        aria-hidden="true"></span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="card animate__animated animate__fadeInLeft animate__delay-1s mt-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-users me-2"></i> 参与人员</h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center py-3">
                            <i class="fas fa-user-friends fa-3x mb-3" style="color: var(--secondary-color);"></i>
                            <h4 id="participantCount">加载中...</h4>
                            <p class="text-muted">总参与人数</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 mb-4">
                <div class="card animate__animated animate__fadeInRight">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-trophy me-2"></i> 抽奖结果</h5>
                    </div>
                    <div class="card-body">
                        <div id="resultArea" class="text-center py-4">
                            <div class="animate__animated animate__pulse animate__infinite">
                                <i class="fas fa-gift fa-4x mb-3" style="color: var(--accent-color);"></i>
                                <h3 class="text-muted">请选择奖项开始抽奖</h3>
                                <p class="text-muted mt-2">好运即将降临...</p>
                            </div>
                        </div>
                        <div class="export-btn-container">
                            <button id="resetBtn" class="btn btn-danger btn-lg">
                                <i class="fas fa-sync-alt me-2"></i>重置所有抽奖
                            </button>
                            <button id="exportBtn" class="btn btn-success btn-lg">
                                <i class="fas fa-file-export me-2"></i>导出中奖记录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="winnerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modalTitle"><i class="fas fa-crown me-2"></i>恭喜中奖</h3>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="modalBody">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <audio id="bgMusic" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>

    <div class="position-fixed bottom-0 end-0 m-3">
        <button id="musicToggle" class="btn btn-primary rounded-circle p-3" data-bs-toggle="tooltip"
            data-bs-placement="left" title="背景音乐">
            <i class="fas fa-music"></i>
        </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化工具提示
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // 音乐控制
            const bgMusic = document.getElementById('bgMusic');
            const musicToggle = document.getElementById('musicToggle');
            let musicPlaying = false;

            musicToggle.addEventListener('click', function () {
                if (musicPlaying) {
                    bgMusic.pause();
                    musicToggle.innerHTML = '<i class="fas fa-music"></i>';
                    musicToggle.setAttribute('data-bs-original-title', '播放背景音乐');
                } else {
                    bgMusic.play();
                    musicToggle.innerHTML = '<i class="fas fa-pause"></i>';
                    musicToggle.setAttribute('data-bs-original-title', '暂停背景音乐');
                }
                musicPlaying = !musicPlaying;
                tooltipList[0].show();
                setTimeout(() => tooltipList[0].hide(), 1000);
            });

            // 创建粒子背景
            createParticles();

            // 抽奖系统逻辑
            const awardList = document.getElementById('awardList');
            const resultArea = document.getElementById('resultArea');
            const resetBtn = document.getElementById('resetBtn');
            const exportBtn = document.getElementById('exportBtn');
            const participantCount = document.getElementById('participantCount');
            const winnerModal = new bootstrap.Modal(document.getElementById('winnerModal'));

            let awards = [];
            let participants = [];
            let winnersHistory = []; // 记录所有中奖者

            // 加载数据
            fetch('/api/data')
                .then(response => response.json())
                .then(data => {
                    participants = data.participants || [];
                    awards = data.rules || [];

                    // 更新参与人数
                    participantCount.textContent = participants.length;
                    participantCount.classList.add('animate__animated', 'animate__bounceIn');

                    renderAwards();
                })
                .catch(error => {
                    console.error('加载数据失败:', error);
                    awardList.innerHTML = `
                        <li class="list-group-item text-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>加载数据失败，请刷新重试
                        </li>
                    `;
                });

            // 渲染奖项列表
            function renderAwards() {
                awardList.innerHTML = '';
                awards.forEach((award, index) => {
                    const item = document.createElement('li');
                    item.className = `list-group-item d-flex justify-content-between align-items-center animate__animated animate__fadeInUp animate__delay-${index + 1}s`;

                    const awardInfo = document.createElement('span');
                    awardInfo.innerHTML = `
            <i class="fas fa-medal me-2" style="color: ${index === 0 ? '#ffd700' :
                            index === 1 ? '#c0c0c0' :
                                index === 2 ? '#cd7f32' : '#4e54c8'
                        }"></i>
            ${award.奖项} <small class="text-muted">(${award.名额}名)</small>
        `;

                    const drawBtn = document.createElement('button');
                    drawBtn.className = 'btn btn-primary btn-sm draw-btn';
                    drawBtn.innerHTML = '<i class="fas fa-random me-1"></i> 抽奖';
                    drawBtn.onclick = () => drawLottery(award.奖项, award.名额);

                    // 检查该奖项是否已经抽过
                    const isAwardDrawn = winnersHistory.some(winner => winner.奖项 === award.奖项);
                    if (isAwardDrawn) {
                        drawBtn.disabled = true;
                        drawBtn.innerHTML = '<i class="fas fa-check me-1"></i> 已抽奖';
                        drawBtn.className = 'btn btn-secondary btn-sm';
                    }

                    item.appendChild(awardInfo);
                    item.appendChild(drawBtn);
                    awardList.appendChild(item);

                    // 添加动画延迟
                    item.style.animationDelay = `${index * 0.1}s`;
                });
            };

            // 执行抽奖
            function drawLottery(award, count) {
                // 先禁用所有抽奖按钮，防止重复点击
                const allDrawButtons = document.querySelectorAll('.draw-btn');
                allDrawButtons.forEach(btn => {
                    btn.disabled = true;
                });

                // 显示加载状态
                resultArea.innerHTML = `
        <div class="animate__animated animate__pulse animate__infinite">
            <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">抽奖中...</span>
            </div>
            <h4>正在抽取 ${award}...</h4>
            <p class="text-muted">请稍候</p>
        </div>
    `;

                // 过滤掉已经中奖的人员
                const availableParticipants = participants.filter(participant =>
                    !winnersHistory.some(winner => winner.姓名 === participant.姓名)
                );

                if (availableParticipants.length < count) {
                    resultArea.innerHTML = `
            <div class="alert alert-warning animate__animated animate__shakeX">
                <i class="fas fa-exclamation-circle me-2"></i>
                可用参与者不足（剩余 ${availableParticipants.length} 人，需要 ${count} 人）
            </div>
        `;
                    playErrorSound();

                    // 恢复未抽奖项的按钮
                    renderAwards();
                    return;
                }

                // 播放抽奖音效
                playDrawSound();

                // 模拟抽奖延迟效果
                setTimeout(() => {
                    // 本地随机抽奖逻辑（替换原来的API调用）
                    const shuffled = [...availableParticipants].sort(() => 0.5 - Math.random());
                    const winners = shuffled.slice(0, count);

                    // 为每个中奖者添加奖项信息
                    const winnersWithAward = winners.map(winner => ({
                        ...winner,
                        奖项: award
                    }));

                    // 将中奖者加入历史记录
                    winnersHistory.push(...winnersWithAward);

                    // 显示结果
                    showWinners(award, winnersWithAward);
                    playSuccessSound();

                    // 重新渲染奖项列表，更新按钮状态
                    renderAwards();
                }, 1500);
            }

            // 显示中奖者
            function showWinners(award, winners) {
                let html = `
        <h3 class="mb-4">
            <i class="fas fa-trophy me-2" style="color: ${award.includes('一等') ? '#ffd700' :
                        award.includes('二等') ? '#c0c0c0' :
                            award.includes('三等') ? '#cd7f32' : '#4e54c8'
                    }"></i>
            ${award} 获奖名单
        </h3>
        <div class="result-list">
    `;

                winners.forEach(winner => {
                    html += `
            <div class="result-item animate__animated animate__fadeInUp">
                <i class="fas fa-user me-2"></i>
                <div class="text-start">
                    <strong>${winner.姓名}</strong>
                    <div class="text-muted small">${winner.部门}</div>
                </div>
            </div>
        `;
                });

                html += '</div>';
                resultArea.innerHTML = html;

                // 显示模态框动画
                const modalTitle = document.getElementById('modalTitle');
                const modalBody = document.getElementById('modalBody');

                modalTitle.innerHTML = `<i class="fas fa-crown me-2"></i>恭喜 ${award} 获奖者`;
                modalBody.innerHTML = '<div class="winners-container"></div>';

                const winnersContainer = modalBody.querySelector('.winners-container');

                winners.forEach((winner, index) => {
                    const winnerDiv = document.createElement('div');
                    winnerDiv.className = 'winner-item animate__animated animate__zoomIn';
                    winnerDiv.style.animationDelay = `${index * 0.1}s`;
                    winnerDiv.innerHTML = `
            <div class="winner-avatar mb-2">
                <i class="fas fa-user-circle fa-3x" style="color: ${getRandomColor()}"></i>
            </div>
            <h4 class="text-primary mb-1">${winner.姓名}</h4>
            <p class="text-muted small mb-2"><i class="fas fa-building me-1"></i>${winner.部门}</p>
            <div class="award-badge mt-2">
                <span class="badge" style="background: ${award.includes('一等') ? 'linear-gradient(45deg, #ffd700, #ffec80)' :
                            award.includes('二等') ? 'linear-gradient(45deg, #c0c0c0, #e0e0e0)' :
                                award.includes('三等') ? 'linear-gradient(45deg, #cd7f32, #e3964e)' :
                                    'linear-gradient(45deg, var(--primary-color), var(--secondary-color))'
                        }">
                    <i class="fas fa-award me-1"></i>${award}
                </span>
            </div>
        `;
                    winnersContainer.appendChild(winnerDiv);
                });

                winnerModal.show();
                createConfetti();
            }
            // 重置抽奖
            resetBtn.addEventListener('click', function () {
                if (confirm('确定要重置所有抽奖结果吗？这将清除所有已抽奖项。')) {
                    winnersHistory = []; // 清空历史记录
                    resetBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 重置中...';
                    resetBtn.disabled = true;

                    // 模拟API调用延迟
                    setTimeout(() => {
                        // 重新渲染奖项列表，使所有抽奖按钮恢复可用状态
                        renderAwards();

                        resultArea.innerHTML = `
                <div class="alert alert-success animate__animated animate__bounceIn">
                    <i class="fas fa-check-circle me-2"></i>
                    抽奖已重置！
                </div>
            `;
                        playSuccessSound();

                        setTimeout(() => {
                            resultArea.innerHTML = `
                    <div class="animate__animated animate__pulse animate__infinite">
                        <i class="fas fa-gift fa-4x mb-3" style="color: var(--accent-color);"></i>
                        <h3 class="text-muted">请选择奖项开始抽奖</h3>
                        <p class="text-muted mt-2">好运即将降临...</p>
                    </div>
                `;
                        }, 2000);

                        resetBtn.innerHTML = '<i class="fas fa-sync-alt me-2"></i>重置所有抽奖';
                        resetBtn.disabled = false;
                    }, 1000);
                }
            });

            // 导出中奖记录
            exportBtn.addEventListener('click', function () {
                if (winnersHistory.length === 0) {
                    resultArea.innerHTML = `
                        <div class="alert alert-warning animate__animated animate__shakeX">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            当前没有中奖记录可导出
                        </div>
                    `;
                    return;
                }

                exportBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 导出中...';
                exportBtn.disabled = true;

                // 准备导出数据
                const exportData = {
                    title: "员工幸运大抽奖中奖记录",
                    date: new Date().toLocaleString(),
                    winners: winnersHistory
                };

                // 生成CSV内容
                let csvContent = "姓名,部门,奖项\n";
                winnersHistory.forEach(winner => {
                    csvContent += `${winner.姓名},${winner.部门},${winner.奖项}\n`;
                });

                // 创建Blob对象
                const csvBlob = new Blob(["\uFEFF" + csvContent], { type: 'text/csv;charset=utf-8;' });

                // 保存文件
                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
                saveAs(csvBlob, `中奖记录_${timestamp}.csv`);

                // 显示导出成功提示
                resultArea.innerHTML = `
                    <div class="alert alert-success animate__animated animate__bounceIn">
                        <i class="fas fa-check-circle me-2"></i>
                        已导出 ${winnersHistory.length} 条中奖记录
                    </div>
                `;

                setTimeout(() => {
                    exportBtn.innerHTML = '<i class="fas fa-file-export me-2"></i>导出中奖记录';
                    exportBtn.disabled = false;
                }, 1000);
            });

            // 创建粒子背景
            function createParticles() {
                const particlesContainer = document.getElementById('particles');
                const particleCount = 50;

                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';

                    // 随机大小
                    const size = Math.random() * 5 + 1;
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;

                    // 随机位置
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.top = `${Math.random() * 100}%`;

                    // 随机透明度
                    particle.style.opacity = Math.random() * 0.5 + 0.1;

                    // 动画
                    const duration = Math.random() * 20 + 10;
                    const delay = Math.random() * 5;
                    particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;

                    particlesContainer.appendChild(particle);
                }
            }

            // 创建彩色纸屑效果
            function createConfetti() {
                const confettiSettings = {
                    target: 'confetti',
                    max: 150,
                    size: 1.5,
                    animate: true,
                    props: ['circle', 'square', 'triangle', 'line'],
                    colors: [[255, 107, 107], [78, 84, 200], [143, 148, 251], [255, 214, 107]],
                    clock: 25,
                    rotate: true,
                    start_from_edge: true,
                    respawn: true
                };

                if (window.ConfettiGenerator) {
                    const confetti = new ConfettiGenerator(confettiSettings);
                    confetti.render();
                    setTimeout(() => confetti.clear(), 5000);
                } else {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js';
                    script.onload = function () {
                        const confetti = new ConfettiGenerator(confettiSettings);
                        confetti.render();
                        setTimeout(() => confetti.clear(), 5000);
                    };
                    document.head.appendChild(script);
                }
            }

            // 播放音效
            function playDrawSound() {
                const audio = new Audio('https://www.soundjay.com/mechanical/sounds/slot-machine-01.mp3');
                audio.volume = 0.3;
                audio.play().catch(e => console.log('自动播放被阻止:', e));
            }

            function playSuccessSound() {
                const audio = new Audio('https://www.soundjay.com/human/sounds/applause-8.mp3');
                audio.volume = 0.5;
                audio.play().catch(e => console.log('自动播放被阻止:', e));
            }

            function playErrorSound() {
                const audio = new Audio('https://www.soundjay.com/buttons/sounds/button-10.mp3');
                audio.volume = 0.3;
                audio.play().catch(e => console.log('自动播放被阻止:', e));
            }

            // 生成随机颜色
            function getRandomColor() {
                const colors = [
                    '#4e54c8', '#8f94fb', '#ff6b6b', '#ff8e8e',
                    '#6b5b95', '#feb236', '#d64161', '#ff7b25'
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }
        });
    </script>
</body>

</html>